<template>
  <div class="container">
    {{error}}
    <div v-if="error.statusCode === 404" class="grid h-screen place-content-center bg-white">
      <div class="text-center">
        <strong class="text-9xl font-black text-gray-200">404</strong>

        <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">Uh-oh!</h1>

        <p class="mt-4 text-gray-500">We can't find that page.</p>

        <a
          class="mt-6 inline-block rounded bg-indigo-600 px-5 py-3 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring"
          href="#"
        >
          Go Back Home
        </a>
      </div>
    </div>
    <h1 v-else>An error occurred</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps<{
  error:{
    url: string;
    statusCode: string|number;
    statusMessage: string;
    message: string;
    description: string;
    data?: any;
  }
}>()
</script>
